<template>
    <div class="custom-tree-container">
        <div class="block">
            <el-tree :data="treedata" node-key="id" default-expand-all :expand-on-click-node="false"
                :props="defaultProps" @node-click="handleNodeClick">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <!-- 分组添加按钮 -->
                    <div class="tree_child_node" v-if="data.children">
                        <div>{{ node.label }}</div>
                        <div>
                            <i class="el-icon-plus" @click.stop="() => appendPlan(data)"></i>
                        </div>
                    </div>
                    <!-- 方案添加按钮 -->
                    <div v-if="!data.children" class="tree_child_node">
                        <div>{{ node.label }}</div>
                        <div>
                            <i @click.stop="() => appendNode(data)" class="el-icon-plus"></i>
                            <i @click.stop="() => editNode(data)" class="el-icon-edit"></i>
                        </div>
                    </div>
                </span>
            </el-tree>
        </div>
        <!-- 添加方案 -->
        <confirmDialog @fromcomfirm="toParent" ref="confirmDialog" />
        <!-- 添加节点 -->
        <el-dialog :visible.sync="dialogVisible" :modal="false">
            <span>
                <el-form ref="form" label-width="80px">
                    <el-form-item label="分类名称">
                        <el-input v-model="flName"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click="quxiao">取消</el-button>
                    </el-form-item>
                </el-form>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import confirmDialog from "./confirmDialog.vue"
import { getTreeList, addTreeList, updateTreeList } from "@/api/newApi/screenPart"

export default {
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'reportGroupName'
            },
            treedata: [],
            nodeActive: false,
            dataNode: null,
            flName: "",
            dialogVisible: false,
            isUpdate: false,
            updateId: ""
        }
    },
    components: {
        confirmDialog
    },
    methods: {
        // 处理树结构数据
        setTreeData(data) {
            let list = data.data
            let dataList = [
                {
                    id: "1",
                    reportGroupName: '全部方案分类',
                    children: list
                }
            ];
            console.log(dataList, "111111111111111111111111");
            this.treedata = dataList
        },
        // 添加节点
        appendNode(data) {
            this.$refs.confirmDialog.dialogVisible = true
            this.$refs.confirmDialog.form.reportGroupId = Number(data.id)
        },
        // 修改节点
        editNode(data) {
            this.dataNode = data
            this.dialogVisible = true
            this.isUpdate = true
            this.flName = data.reportGroupName
            this.updateId = data.id
        },
        // 树点击
        handleNodeClick(data) {
            this.$emit("treeClick", data)
        },
        // 确认
        onSubmit() {
            let _self = this
            if (this.isUpdate) { // 新增则调取新增接口
                updateTreeList({
                    id: this.updateId,
                    reportGroupName: this.flName
                })
            } else {  // 更新则调取更新接口
                addTreeList({
                    reportGroupName: this.flName
                })
            }
            this.dialogVisible = false
            this.isUpdate = false
            // 重新请求树结构list
            setTimeout(async () => {
                let res = await getTreeList()
                _self.setTreeData(res)
            }, 500);


        },
        quxiao() {
            this.flName = ""
            this.dataNode = null
            this.dialogVisible = false
        },
        // 添加方案
        appendPlan(data) {
            this.dataNode = data
            this.dialogVisible = true
        },
        toParent(data) {
            this.$emit("fromSideTree", data)
        }
    }
};
</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.tree_child_node {
    width: 90%;
    display: flex;
    justify-content: space-between;
}
</style>
